import React, {useEffect, useState} from 'react';
import "./index.css"
import Sider from "antd/es/layout/Sider";
import {Menu} from "antd";
import {NavLink, useLocation} from "react-router-dom";
import {createFromIconfontCN} from "@ant-design/icons";
import {connect} from "react-redux";

const SideMenu = (props) => {
  const MyIcon = createFromIconfontCN({
    scriptUrl: "//at.alicdn.com/t/c/font_3684780_hkz1h05xn4r.js"
  });
  const [menu, setMenu] = useState([]);
  const m = [
    {
      id: 1,
      key: "/home",
      icon: "icon-shouye",
      link: "/home",
      title: "首页"
    },
    {
      id: 2,
      key: "/article",
      icon: "icon-wenzhangguanli",
      title: "文章管理",
      children: [
        {
          id: 2,
          key: "/article/write",
          icon: "icon-combinedshapecopy2",
          link: "/article/write",
          title: "新建文章",
        },
        {
          id: 3,
          key: "/article/list",
          icon: "icon-wenzhangliebiao",
          link: "/article/list",
          title: "文章列表",
        },
        {
          id: 4,
          key: "/article/audit",
          icon: "icon-wenzhangshenhe",
          link: "/article/audit",
          title: "文章审核",
        }
      ]
    }
  ];

  const selectKeys = [useLocation().pathname];
  const openKeys = ["/" + useLocation().pathname.split("/")[1]]
  // const UserOutlined = React.createElement(Icon["UserOutlined"], {style: {fontSize: "16px"}})
  // 渲染菜单和路由
  const menuRender = (item) => {
    return item.map((item) => {
      if (!item.children || item.children?.length === 0) {
        return {
          key: item.key,
          icon: <MyIcon type={item.icon}/>,
          label: item.link ? <NavLink to={item.link}>{item.title}</NavLink> : item.title
        }
      } else {
        return {
          key: item.key,
          icon: <MyIcon type={item.icon}/>,
          label: item.link ? <NavLink to={item.link}>{item.title}</NavLink> : item.title,
          children: menuRender(item.children)
        }
      }
    })
  }
  const menus = menuRender(m);
  return (
    <Sider
      trigger={null}
      collapsible
      collapsed={props.collapsed}
    >
      <div style={{
        display: "flex",
        height: "100%",
        flexDirection: "column"
      }}>
        <div className={"logo"}>博客后台管理系统</div>
        <div style={{
          flex: 1,
          overflow: "auto"
        }}>
          <Menu
            theme="dark"
            mode="inline"
            selectedKeys={selectKeys}
            defaultOpenKeys={openKeys}
            items={menus}
          />
        </div>
      </div>
    </Sider>
  );
};
const mapStateToProps = (state) => {
  return {
    collapsed: state.sandBox.collapsed
  }
}
export default connect(mapStateToProps, null)(SideMenu);